<template>
  <div
    :class="{ 'arr-item': true, 'arr-select': select }"
    :style="{ height: itemHeight }"
  >
    {{ value }}
  </div>
</template>

<script>
export default {
  name: "BaseArrItem",
  props: {
    value: {
      type: Number,
      default: 0,
    },
    select: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    itemHeight() {
      return `${this.value * 2}px`;
    },
    // itemTransform() {
    //   return `translateX(${this.index * 0}px)`;
    // },
  },
};
</script>

<style scoped lang="scss">
.arr-item {
  margin: 0 5px;
  background: #f40;
  width: 40px;
  text-align: center;
  color: #fff;
}

.arr-select {
  background: rgb(25, 218, 66);
}
</style>
